<template>
  <div class='container'>
    <h2>短链还原</h2>
    <a-alert>最多支持200条, 短链之间使用换行分隔</a-alert>
    <div style='margin-top: 20px;'>
      <a-row align='center'>
        <!--左边:输入短链-->
        <a-col :span='8' align='center'>
          <span>短链</span>
          <a-textarea class='input-tex' placeholder='请将需要还原的短网址粘贴至此处' allow-clear />
        </a-col>
        <!--箭头过度-->
        <icon-double-right :size='20' style='margin-left: 10px' />
        <!--右边:原始链接-->
        <a-col :span='15' style='margin-left: 20px;' align='center'>
          <span>原始链接</span>
          <a-textarea class='output-tex' allow-clear />
        </a-col>
      </a-row>
    
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";

const shortLinkList = ref([]);
const originalLinkList = ref([]);

</script>

<style scoped lang='less'>
.container {
  margin: 20px 10px;
  padding: 10px 20px 40px 20px;
  background-color: #fff;
  
  .input-tex {
    height: 240px;
  }
  
  .output-tex {
    height: 240px;
  }
  
  span {
    display: inline-block;
    font-size: 20px;
    margin-bottom: 10px;
  }
}
</style>